<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="js/vue-2.6.12.js"></script>
</head>
<body>

<div id="app">

<!--	最后一步 使用父组件-->
	<my-table></my-table>
<!--	<my-table></my-table>-->

</div>

<!-- thead 组件-->
<template id="my-thead">
	<thead>
	<th>id</th>
	<th>name</th>
	<th>age</th>
	</thead>
</template>

<!-- tbody组件-->
<template id="my-tbody">
	<tbody>
	<tr v-for="p in persons">
		<td>{{p.id}}</td>
		<td>{{p.name}}</td>
		<td>{{p.age}}</td>
	</tr>
	</tbody>
</template>

<!-- table组件-->
<template id="my-table">
<!--	通过is 来使用 子组件-->
	<table border="1">
	<thead is="my-thead"></thead>
	<tbody is="my-tbody"></tbody>
	</table>

</template>

<script>

	let myThead = {
	  template:"#my-thead",
	} ;
	
	let myTbody = {
	  template: "#my-tbody",
	  data:function () {
	    return {
	      persons:[
	        {id:1,name:"xiaobai",age:24},
	        {id:2,name:"xiaolan",age:25},
	        {id:3,name:"xiaoya",age:26}
	      ]
	    }
      }
	};
	
	//在 table组件中注册 所使用的子组件
	let myTable = {
	  template:"#my-table",
	  components: {
        "my-thead": myThead,
        "my-tbody": myTbody
      }
	};
	
	
	//vue 实例
	let app = new Vue({
	  el:"#app",
	  
	  components: {
	  
	  //  在 vue实例中 注册父组件
	    "my-table":myTable
	    
	  }
	  
	})
	
	

</script>


</body>
</html>